import { useEffect, useState, memo } from "react";
import { Button } from "antd";
import { Video } from "@/components";
import { getCameraList } from "@/api/camera";
const configMap = {
  oneVideo: {
    type: 1,
    classNames: {
      container: ["flex video-wrap"],
      main: ["transition-all basis-3/4  grid gap-4"],
      menu: ["overflow-y-scroll transition-all basis-1/4 "],
    },
  },
  fourVideo: {
    type: 4,
    classNames: {
      container: ["flex video-wrap"],
      main: [
        "transition-all basis-3/4 grid grid-cols-2 p-2 gap-2 bg-amber-200",
      ],
      menu: ["overflow-y-scroll transition-all basis-1/4 "],
    },
  },
  allVideo: {
    type: 0,
    classNames: {
      container: ["flex video-wrap"],
      main: ["transition-all hidden"],
      menu: [
        "transition-all basis-full  grid grid-flow-row-dense grid-cols-3 grid-rows-3 gap-4",
      ],
    },
  },
};

function Vports() {
  const [cameraList, setCameraList] = useState([]);
  const data = [
    {
      id: 1,
      type: "flv",
      url: "http://localhost:3030/stream.flv",
      active: true,
    },
    {
      id: 2,
      type: "flv",
      url: "http://localhost:3030/stream.flv",
      active: true,
    },
    {
      id: 3,
      type: "flv",
      url: "http://localhost:3030/stream.flv",
      active: true,
    },
    {
      id: 4,
      type: "flv",
      url: "http://localhost:3030/stream.flv",
      active: true,
    },
    {
      id: 5,
      type: "flv",
      url: "http://localhost:3030/stream.flv",
      active: false,
    },
    {
      id: 6,
      type: "flv",
      url: "http://localhost:3030/stream.flv",
      active: false,
    },
    {
      id: 7,
      type: "flv",
      url: "http://localhost:3030/stream.flv",
      active: false,
    },
    {
      id: 8,
      type: "flv",
      url: "http://localhost:3030/stream.flv",
      active: false,
    },
    {
      id: 9,
      type: "flv",
      url: "http://localhost:3030/stream.flv",
      active: false,
    },
  ];

  const [currentType, setCurrentType] = useState();
  const [videos, setVideos] = useState<Array<object>>([]);

  const switchLayout = (moduleType: string) => {
    // configMap[currentType].activeList = videos;

    if (configMap[moduleType].activeList) {
      setVideos(configMap[moduleType].activeList);
    } else {
      const length = configMap[moduleType].type;
      const list = cameraList.slice(0, length);
      setVideos(list);
    }
    setCurrentType(moduleType);
  };

  const handleClick = (id: number) => {
    if (currentType === "allVideo") {
      return;
    }

    const video = videos.find((item) => item.id === id);
    if (video) {
      return;
    }
    const activeVideo = cameraList.find((item) => item.id === id);

    const [_, ...list] = videos;

    setVideos([...(list || []), activeVideo]);
    configMap[currentType].activeList = [...(list || []), activeVideo];
  };

  const getClassName = (classNames: Array<string>): string => {
    if (!classNames) {
      return "";
    }
    return classNames.join(" ");
  };

  const activeClassName = (id: number) => {
    const classNames = ["flex justify-center align-center m-2 border-2"];
    if (currentType === "allVideo") {
      return getClassName(classNames);
    }
    const video = videos.find((video) => video.id === id);
    if (video) {
      classNames.push("border-4 border-indigo-500");
    }
    return getClassName(classNames);
  };

  const getActiveConfig = () => {
    return configMap[currentType];
  };

  useEffect(() => {
    getCameraList().then((result) => {
      setCameraList(result);
      // 筛选默认选中的摄像头  判断预览模式
      const activeList = result.filter((item) => item.active === "true");
      setVideos(activeList);
      Object.keys(configMap).forEach((item) => {
        if (configMap[item].type === activeList.length) {
          setCurrentType(item);
        }
      });
    });
  }, []);

  return (
    <div className="h-full flex flex-col">
      <div className="tool-bar flex justify-between ">
        <div></div>
        <div className="space-x-4 p-2">
          <Button type="primary" onClick={() => switchLayout("allVideo")}>
            平面视频显示
          </Button>
          <Button type="primary" onClick={() => switchLayout("oneVideo")}>
            单视频显示
          </Button>
          <Button type="primary" onClick={() => switchLayout("fourVideo")}>
            四视频显示
          </Button>
        </div>
      </div>

      <div className={getClassName(getActiveConfig()?.classNames?.container)}>
        <div className={getClassName(getActiveConfig()?.classNames?.main)}>
          {videos.map((item) => (
            <div
              className="flex justify-center align-center border-2"
              key={`videos${item.id}`}
            >
              <Video
                url={`http://localhost:3030/api/v1/stream.flv/${item.id}`}
                type={item.type}
                title={item.name}
              ></Video>
            </div>
          ))}
        </div>
        <div className={getClassName(getActiveConfig()?.classNames?.menu)}>
          {cameraList.map((item) => (
            <div
              key={`cameraList${item.id}`}
              className={activeClassName(item.id)}
              data-active={true}
              onClick={() => handleClick(item.id)}
            >
              <Video
                url={`http://localhost:3030/api/v1/stream.flv/${item.id}`}
                type={item.type}
                style={{ maxHeight: "100%" }}
                title={item.name}
              ></Video>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default memo(Vports);
